Embedded Mermaid diagrams

How to embed Mermaid diagrams to a slide? The challenge is that you need to render cell inside another cell.

There is a special wrapper, that allows to embed cell content into a custom DOM element provided by the execution environment - CellView.

info

When you are working with slides, every Wolfram Expression is transformed into WLXForm. You need to define this form for your symbol to render it on a slide correctly. Or one can wrappers, which has both StandardForm and WLXForm by the default such as FrontEndExecutable provided by CreateFrontEndObject.

CellView, EditorView, Graphics and some other symbols do not require extra actions, since WLXForm is already defined for them.

MyDiagram = CellView["
graph LR
    A[Text Header 3200 byte]  --> B[Binary Header 400 byte]
    B --> C1[240 byte 1-st trace header] --> T1[samples of 1-st trace]
    B --> C2[240 byte 2-st trace header] --> T2[samples of 1-st trace]
    B --> CN[240 byte n-st trace header] --> T3[samples of 1-st trace] 
", "Display"->"mermaid", ImageSize->900] 

then on a slide simply run

.slide

# Title of my Slide

<MyDiagram/>